/** * Created by wust on 2020-04-03 09:47:35. */
<template>
  <el-form ref="formModel" :model="formModel" :rules="rules" label-width="120px" style="width:70%;" @submit.native.prevent>
    <el-form-item label="工单类型" prop="workOrderTypeId">
      <el-cascader v-model="workOrderTypeCascaderValue" :options="workOrderTypeCascaderOptions" @change="workOrderTypeCascaderHandleChange"></el-cascader>
    </el-form-item>
    <el-form-item label="员工" prop="userIds">
      <el-cascader :props="{ multiple: true }" v-model="userCascaderValue" :options="userCascaderOptions" @change="userCascaderHandleChange"></el-cascader>
    </el-form-item>
    <el-form-item label="备注" prop="description">
      <el-input
        type="textarea"
        :rows="6"
        placeholder="请输入内容"
        maxlength="255"
        show-word-limit
        v-model="formModel.description">
      </el-input>
    </el-form-item>
    <el-form-item style="text-align: left;"><el-button type="primary" @click="onSubmit('formModel')" :loading="submitting">提交</el-button></el-form-item>
  </el-form>
</template>
<script>
import Vue from 'vue';

export default {
  name: 'work-order-user-create',
  data() {
    return {
      submitting: false,
      formModel: {
        workOrderTypeId: null,
        userIds: null,
        description: null
      },
      rules: {
        workOrderTypeId: [{required: true, message: '请选择工单类型', trigger: 'blur'}],
        userIds: [{required: true, message: '请选择员工', trigger: 'blur'}]
      },
      workOrderTypeCascaderOptions: [],
      workOrderTypeCascaderValue: [],
      userCascaderOptions: [],
      userCascaderValue: []
    };
  },
  created: function () {
    this.initWorkOrderTypeCascaderOption()
    this.initUserCascaderOption()
  },
  methods: {
    workOrderTypeCascaderHandleChange: function (val) {
      this.formModel.workOrderTypeId = val[val.length - 1]
    },
    initWorkOrderTypeCascaderOption: function () {
      Vue.$ajax({
        method: 'post',
        url: Vue.$workOrderServerURL + '/web/WorkOrderTypeController/buildCascader'
      }).then(res => {
        if (res.data.flag !== 'SUCCESS') {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        } else {
          this.workOrderTypeCascaderOptions = res.data.obj
        }
      })
    },
    userCascaderHandleChange: function (val) {
      if (val != null && val.length > 0) {
        let val1 = ''
        for (let i = 0; i < val.length; i ++) {
          if (Vue.$isNullOrIsBlankOrIsUndefined(val[i])) {
            continue
          }

          val1 += val[i] + ','
        }
        this.formModel.userIds = val1
      }
    },
    initUserCascaderOption: function () {
      Vue.$ajax({
        method: 'post',
        url: Vue.$adminServerURL + '/web/UserController/buildCascader'
      }).then(res => {
        if (res.data.flag !== 'SUCCESS') {
          if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        } else {
          this.userCascaderOptions = res.data.obj
        }
      })
    },
    onSubmit: function(formData) {
      this.$refs[formData].validate(valid => {
        if (!valid) {
        } else {
          this.submitting = true;
          Vue.$ajax({
            method: 'post',
            url: Vue.$workOrderServerURL + '/web/WorkOrderUserController',
            data: this.formModel
          }).then(res => {
            this.submitting = false;
            if (res.data.flag !== 'SUCCESS') {
              if (!Vue.$isNullOrIsBlankOrIsUndefined(res.data.message)) {
                this.$message({
                  message: res.data.message,
                  type: 'warning'
                });
              }
            } else {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
              this.resetForm('formModel');
            }
          });
        }
      });
    },
    resetForm(formData) {
      this.$refs[formData].resetFields()
      this.workOrderTypeCascaderValue = []
      this.userCascaderValue = []
    }
  }
};
</script>
